<template>
	<!-- <view @longpress="longtap(item,index)" @touchstart='touchstart(index)'
        @touchend='touchend(index)'>uni-file-item--{{index}}--{{item.name}}</view> -->
      <view class="file-li" 
        @click="selectFile(item,index)" 
        :class="{ 
            'notfolder' : ( operateStatus === 'move' && item.type ==1  ||  (operateStatus === 'move' && selectArr.findIndex(items => items.id ==  item.id) != -1  && item.type == 0) ? true : false) ,
            'li-selected' : selectArr.findIndex(items => items.id ==  item.id) != -1  ? true : false ,
            'li-selected' : shareArr.findIndex(items => items ==  item.id) != -1 && pageType=='cloud'  ? true : false ,
            'li-selected' : hoverIndex == index ?  true : false
        }" 
        >
        <view class="file-li-main">
            <view class="">
                <image v-if="item.type == 0 " class="iconfont  icon-header" mode="scaleToFill"
                    :src="`${imgUrl}/cloud/FILE.png`"></image>
                <image v-if="item.type == 1  && tools.fileType(item.fileInfo.originalName) == 'ppt'"
                    class="iconfont  icon-header" mode="scaleToFill"
                    :src="`${imgUrl}/cloud/PPT.png`"></image>
                <image
                    v-else-if="item.type == 1 && tools.fileType(item.fileInfo.originalName) == 'other'"
                    class="iconfont  icon-header" mode="scaleToFill"
                    :src="`${imgUrl}/cloud/all.png`"></image>
                <image
                    v-else-if="item.type == 1 && tools.fileType(item.fileInfo.originalName) == 'excel'"
                    class="iconfont  icon-header" mode="scaleToFill"
                    :src="`${imgUrl}/cloud/EXCEL.png`"></image>
                    <image  v-else-if="item.type == 1 && tools.fileType(item.fileInfo.originalName) == 'img'"
                    class="iconfont  icon-header" mode="scaleToFill"   style="border-radius:4rpx"
                    :src="`${item.fileInfo.fileLink}?imageMogr2/thumbnail/!75x75r/interlace/0|imageMogr2/gravity/center/crop/80x80`"></image>
                <image
                    v-else-if="item.type == 1  &&  tools.fileType(item.fileInfo.originalName) == 'pdf' "
                    class="iconfont  icon-header" mode="scaleToFill"
                    :src="`${imgUrl}/cloud/PDF.png`"></image>
                <image
                    v-else-if="item.type == 1 && tools.fileType(item.fileInfo.originalName) == 'word' "
                    class="iconfont  icon-header" mode="scaleToFill"
                    :src="`${imgUrl}/cloud/word.png`"></image>
                <image
                    v-else-if="item.type == 1 && tools.fileType(item.fileInfo.originalName) == 'text' "
                    class="iconfont  icon-header" mode="scaleToFill"
                    :src="`${imgUrl}/cloud/JPGPNG.png`"></image>
                <image
                    v-else-if="item.type == 1 && tools.fileType(item.fileInfo.originalName) == 'html' "
                    class="iconfont  icon-header" mode="scaleToFill"
                    :src="`${imgUrl}/cloud/HTEML.png`"></image>
                <image
                    v-else-if="item.type == 1 && tools.fileType(item.fileInfo.originalName) == 'video' "
                    class="iconfont  icon-header" mode="scaleToFill"
                    :src="`${imgUrl}/cloud/AVIMOV.png`"></image>
                <image
                    v-else-if="item.type == 1 && tools.fileType(item.fileInfo.originalName) == 'audio' "
                    class="iconfont  icon-header" mode="scaleToFill"
                    :src="`${imgUrl}/cloud/MP3.png`"></image>
                <image
                    v-else-if="item.type == 1 && tools.fileType(item.fileInfo.originalName) == 'ZIPRAR' "
                    class="iconfont  icon-header" mode="scaleToFill"
                    :src="`${imgUrl}/cloud/ZIPRAR.png`"></image>
            </view>
            <view class="file-li-content">            
                <view v-if="pageType=='resource'||pageType=='selectResource'||pageType=='inClassResource'">
                    <view class="one-text" style="max-width: 320rpx;">{{ item.name }}</view>
                    <view v-if="item.type == 1 &&  item.isPublished == 0" class="fabu-status">未发布
                    </view>
                </view>
                <view v-else class="one-text" style="display:block;">
                    {{ item.name }}
                </view>
                <view class="">
                    <text style="margin-right:24rpx">{{ tools.formatTime(item.modifiedTime , 'yy-mm-dd  hh:mm') }}</text>
                    <text
                        v-if="item.type == 1 ">{{ tools.bytesToSize(item.fileInfo.fileSize * 1024) }}</text>
                </view>
            </view>
        </view>
        <view class="download" v-if="operateStatus != 'default' && (pageType=='cloud'||pageType=='resource')">
            <image v-if="operateStatus=== 'move' &&  item.type == 0"
                class="iconfont  icon-selected " mode="scaleToFill"
                :src="`${imgUrl}/teach_resource/icon_right.png`"></image>
            <image
                v-if="operateStatus=== 'edit' &&  selectArr.findIndex(items => items.id ==  item.id) == -1"
                class="iconfont  icon-selected " mode="scaleToFill"
                :src="`${imgUrl}/teach_resource/option.png`"></image>
            <image
                v-if="operateStatus=== 'edit' &&  selectArr.findIndex(items => items.id ==  item.id) !== -1"
                class="iconfont  icon-selected " mode="scaleToFill"
                :src="`${imgUrl}/teach_resource/selection.png`"></image>
        </view>
        <view class="download" v-if="operateStatus != 'default' && (pageType=='selectCloud'||pageType=='selectResource')">
            <image v-if="operateStatus=== 'edit' &&  item.type == 0"
                class="iconfont  icon-selected " mode="scaleToFill"
                :src="`${imgUrl}/teach_resource/icon_right.png`"></image>
            <image
                v-if="operateStatus=== 'edit' &&  item.type == 1 &&  selectArr.findIndex(items => items.id ==  item.id) == -1"
                class="iconfont  icon-selected " mode="scaleToFill"
                :src="`${imgUrl}/teach_resource/option.png`"></image>
            <image
                v-if="operateStatus=== 'edit' &&  item.type == 1 &&  selectArr.findIndex(items => items.id ==  item.id) !== -1"
                class="iconfont  icon-selected " mode="scaleToFill"
                :src="`${imgUrl}/teach_resource/selection.png`"></image>
        </view>
        <view @tap.stop="onShowMoreOperate(item)" v-if="operateStatus=== 'default' && pageType!='selectCloud'&&pageType!='inClassResource'">
            <image class="iconfont  icon-selected " mode="scaleToFill"
                :src="`${imgUrl}/teach_resource/icon_showMore_1.png`"></image>
        </view>
    </view>
</template>

<script>
	export default {
		name: 'UniFileItem',
		components: {
		},
		props: {
            item: {
				type: Object,
				default () {
					return {
					}
				}
            },
            pageType: {
				type: String,
				default :''
            },
            selectArr:{
                type: Array,
                default:[]
            },
            shareArr:{
                type: Array,
                default:[]
            },
            operateStatus: {
				type: String,
				default: 'default', // default  ,   edit ,  cancel  ,  select ,  move
			}, // 列表标题
            index: {
				type: Number,
				default: 0
			}, // 列表标题
		},
		data() {
			return {
                tools: this.$tools,
                imgUrl: this.$CDNURL.IMGURL,
			}
		},
		mounted() {
		},
		methods: {
            // 长按
            longtap(item, index) {
                this.$emit('longtap',item,index)
            },
            touchstart(index) {
                this.$emit('touchstart',index)
            },
            touchend() {
                this.$emit('touchend')
            },
            selectFile(item, index) {
                this.$emit('selectFile',item,index)
            },
            onShowMoreOperate(item){
                 this.$emit('onShowMoreOperate',item)
            }
		}
	}
</script>

<style lang="scss" scoped>
    .file-li {
        @include file-li();
    }
    .li-selected{
        background:#EDFFF5 !important;
    }
</style>
